<!-- 汇总数据 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" :showExport="true" :showFrom="false" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" @download="exportXlsx" @sort="sortTable" @changeTh="data.dialogVisible = true" :isSearchShow="false">
    <template #form></template>
    <template #button></template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
          :sortable="item.sortable ? 'custom' : false" show-overflow-tooltip>
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                <div v-html="item.tips"></div>
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'game_id'" #default="scope">
            <div class="gameIconShow">
              <div><img class="game-icon" :src="selectToLabel(GAMEICON, scope.row.game_id)" alt=""></div>
              {{ scope.row.game_id?GameName(indexStore.gameArray, scope.row.game_id):$t('87') }}
            </div>
          </template>
          <template v-if="item.prop == 'sum_bet'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.sum_bet) }}</span>
          </template>
          <template v-if="item.prop == 'win_lose'" #default="scope">
            <span :class="colorClass(scope.row.win_lose)">{{
              BigWan(scope.row.win_lose)
            }}</span>
          </template>
          <template v-if="item.prop == 'rtp'" #default="scope">
            <span :class="sumRtp(scope.row.sum_bet, scope.row.sum_win).includes('-') ? 'colorRed' : 'colorGre'">{{
              sumRtp(scope.row.sum_bet, scope.row.sum_win)
            }}</span>
          </template>
          <template v-if="item.prop == 'date'" #default="scope">
            {{ setTimestampTime(scope.row.date) }}
          </template>
        </el-table-column>
      </template>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed, watch } from 'vue'
import { getGameStatistic } from '@/api/report'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import { GAMEICON } from '@/config/eunm'
import { setTimeValue, setTimestampTime } from '@/utils/time'
import { BigWan, BigTofixedTwo } from '@/utils/math'
import { exportToExcel } from '@/utils/export'
import { selectToLabel, sumRtp, colorClass,GameName } from '@/utils/index'
import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    start_time: '', // 开始时间
    end_time: '', // 结束时间
    date: [],
    sort_desc: '',
    sort_value: '',
  },
  list: [],
  total: 0,
  fields: [
    { label: t('36'), prop: 'game_id', width: '', visible: true, tips: t('541') },
    { label: t('82'), prop: 'sum_bet', width: '', visible: true, tips: t('328', { br: '<br>' }), sortable: true },
    { label: t('83'), prop: 'bet_times', width: '', visible: true, tips: t('329', { br: '<br>' }), sortable: true },
    { label: t('80'), prop: 'win_lose', width: '', visible: true, tips: t('330', { br: '<br>' }), sortable: true },
    { label: t('84'), prop: 'login_num', width: '', visible: true, tips: t('331', { br: '<br>' }), sortable: true },
    { label: t('85'), prop: 'uid_num', width: '', visible: true, tips: t('332', { br: '<br>' }), sortable: true },
    { label: t('78'), prop: 'rtp', width: '', visible: true, tips: t('333', { br: '<br>' }), sortable: true },
    { label: t('86'), prop: 'date', width: '', visible: true }
  ],
  dialogVisible: false
})

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  indexStore.setPageLoading(true)
  data.query = setTimeValue(data.query)
  let res = await getGameStatistic(data.query)
  indexStore.setPageLoading(false)
  data.list = res.data.list
  data.total = res.data.total
}

// 排序
const sortTable = (val: any) => {
  data.query.sort_desc = val.order
  // if(val.prop == 'rtp'){
  //   data.query.sort_value = 'sum_bet/sum_win'
  // }else{
    data.query.sort_value = val.prop
  // }
  getSearchList()
}

// 修改页数
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}
const changeSize = (val: number) => {
  data.query.size = val
}

const exportXlsx = async () => {
  let query = JSON.parse(JSON.stringify(data.query))
  query.page = 1
  query.size = 100000
  let res = await getGameStatistic(query)
  let dataList = res.data.list

  let header: string[] = []
  let list: never[][] = []

  data.fields.forEach((item) => {
    header.push(item.label)
  })

  dataList.forEach((item: { [x: string]: any }, index: any) => {
    let arr: never[] = []
    let str = ''
    data.fields.forEach((x) => {
      switch (x.prop) {
        case 'game_id':
          str = ''
          if (item[x.prop] == 0) {
            str = t('13')
          } else {
            str = GameName(indexStore.gameArray, item[x.prop])
          }
          arr.push(str as never)
          break
        case 'date':
          arr.push(setTimestampTime(item[x.prop]) as never)
          break
        case 'sum_bet':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'win_lose':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'rtp':
          let rtp = sumRtp(item.sum_bet, item.sum_win)
          arr.push(rtp as never)
          break
        default:
          arr.push(item[x.prop] as never)
          break
      }
    })
    list.push(arr)
  })

  exportToExcel(list, header, t('13'))
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}
</script>

<style scoped lang="scss"></style>
